import React, { Component } from 'react';
import { View, StyleSheet, Image, Text } from 'react-native';

/**
 * 导入json数据
 */
let BadgeData = require('./../../BadgeData.json');

let Dimensions = require('Dimensions');
let { width } = Dimensions.get('window');
// 定义一些全局变量
// 定义列数
let cols = 3;
// 定义盒子宽度
let boxW = 120;
// 定义左边距
let vMargin = (width - boxW * cols) / (cols + 1);
// 定义顶部间距
let hMargin = 25;

export default class AImageDemo extends Component {
    render() {
        return (
            <View style={ styles.container }>
                {/*返回6个包, 调用方法*/}
                {this.renderAllBadge()}
            </View>
        )
    }

    /**
     * 返回所有的包
     */
    renderAllBadge() {
        // 定义数组，用来装所有的子组件
        let allBadge = [];
        // 遍历json数据
        for (let i = 0; i < BadgeData.data.length; i++) {
            // 取出单独的数据对象
            let badge = BadgeData.data[i];
            // 直接装入数组
            allBadge.push(
                <View key={i} style={styles.outViewStyle}>
                    {/* 加载Android下drawable-hdpi文件 */}
                    <Image source={{uri: badge.icon}} style={styles.otherImageStyle}/>
                    <Text style={styles.titleStyle}>{badge.title}</Text>
                </View>
            )
        }
        // 返回数组
        return allBadge;
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EEEEEE',
        // 确定主轴的方向
        flexDirection: 'row',
        // 设置超出换行
        flexWrap: 'wrap'
    },
    outViewStyle: {
        // 设置侧轴的对齐方式
        alignItems: 'center',
        width: boxW,
        height: boxW,
        marginLeft: vMargin,
        marginTop: hMargin
    },
    otherImageStyle: {
        width: 100,
        height: 100
    },
    titleStyle: {

    }
});
